<template>
  <div class="form-style">
    <el-container class="form-container">
      <el-aside width="250px">
        <div class="components">
          <ComponentGroup
            title="基础表单"
            :fields="basicFields"
            :list="element.basicComponents"
          />
          <ComponentGroup
            title="布局"
            :fields="layoutFields"
            :list="element.layoutComponents"
          />
          <ComponentGroup
            title="扩展组件"
            :fields="advanceFields"
            :list="element.advanceComponents"
          />
        </div>
      </el-aside>
      <el-main class="center-container">
        <ElCustomHeader
          v-bind="$props"
          @preview="() => (previewVisible = true)"
          @uploadJson="() => (uploadJsonVisible = true)"
          @generateJson="handleGenerateJson"
          @generateCode="handleGenerateCode"
          @clearable="handleClearable"
        >
          <slot name="header"></slot>
        </ElCustomHeader>
        <ElWidgetForm
          ref="widgetFormRef"
          v-model:widgetForm="widgetForm"
          v-model:widgetFormSelect="widgetFormSelect"
        />
      </el-main>
      <el-aside class="widget-config-container" width="300px">
      </el-aside>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, PropType, toRefs, watchEffect } from 'vue'
import { ElMessage } from 'element-plus'
import { defaultsDeep } from 'lodash'
import { element } from './config'
import ComponentGroup from './common/ComponentGroup.vue'
import ElCustomHeader from './element/CustomHeader.vue'
import ElWidgetForm from './element/WidgetForm.vue'

export enum CodeType {
  Vue = 'vue',
  Html = 'html'
}

export enum PlatformType {
  Antd,
  Element
}

export default defineComponent({
  name: 'ElFormDesign',
  components: {
    ComponentGroup,
    ElCustomHeader,
    ElWidgetForm,
   
  },
  props: {
    preview: {
      type: Boolean,
      default: true
    },
    generateCode: {
      type: Boolean,
      default: true
    },
    generateJson: {
      type: Boolean,
      default: true
    },
    uploadJson: {
      type: Boolean,
      default: true
    },
    clearable: {
      type: Boolean,
      default: true
    },
    basicFields: {
      type: Array as PropType<Array<string>>,
      default: () => [
        'input',
        'password',
        'textarea',
        'number',
        'radio',
        'checkbox',
        'time',
        'date',
        'rate',
        'select',
        'switch',
        'slider',
        'text'
      ]
    },
    advanceFields: {
      type: Array as PropType<Array<string>>,
      default: () => ['img-upload', 'richtext-editor', 'cascader']
    },
    layoutFields: {
      type: Array as PropType<Array<string>>,
      default: () => ['grid']
    }
  },
  setup() {
    const state = reactive({
      element,
      codeType: CodeType,
      widgetForm: JSON.parse(JSON.stringify(element.widgetForm)),
      widgetFormSelect: undefined,
      previewVisible: false, // 预览弹层
      uploadJsonVisible: false, // 导入json
      dataCodeVisible: false,
      generateJsonVisible: false,
      generateCodeVisible: false,
      generateJsonTemplate: JSON.stringify(element.widgetForm, null, 2),
      codeLanguage: CodeType.Vue,
      jsonEg: JSON.stringify(element.widgetForm, null, 2)
    })

    // 导入json
    const handleUploadJson = () => {
      try {
        state.widgetForm.list = []
        defaultsDeep(state.widgetForm, JSON.parse(state.jsonEg))

        if (state.widgetForm.list) {
          state.widgetFormSelect = state.widgetForm.list[0]
        }

        state.uploadJsonVisible = false
        ElMessage.success('上传成功')
      } catch (error) {
        ElMessage.error('上传失败')
      }
    }

    // 导入json
    const handleGenerateJson = () =>
    (state.generateJsonTemplate = JSON.stringify(
      state.widgetForm,
      null,
      2
    )) && (state.generateJsonVisible = true)

    // 生成code
    const handleGenerateCode = () => {
      state.codeLanguage = CodeType.Vue
      state.dataCodeVisible = true
    }

    // 清空
    const handleClearable = () => {
      state.widgetForm.list = []
      defaultsDeep(
        state.widgetForm,
        JSON.parse(JSON.stringify(element.widgetForm))
      )
      state.widgetFormSelect = undefined
    }

    return {
      ...toRefs(state),
      handleUploadJson,
      handleGenerateJson,
      handleGenerateCode,
      handleClearable,
    }
  }
})
</script>

<style lang="scss" scoped>
@import './style/index.scss';
</style>


